<template>
	<view class="history">
		<view class="top">
			<text class="title">历史记录</text>
			<uni-icons type="trash" size="20" @click="del"></uni-icons>
		</view>
		<view class="bottom">
			<text class="inside" v-for="(item,index) in history" :key="index" @click="historys(item)">{{item}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:['history'],
		data() {
			return {

			}
		},
		methods:{
			del(){
				this.$emit('del')
			},
			historys(item){
				this.$emit('historys',item)
			}
		}
	}
</script>

<style lang="scss">
	.history {
		width: 100%;
		//background-color: yellow;
		.top {
			width: 88%;
			height: 40rpx;
			margin: auto;
			//background-color: green;
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
			.title {
				font-size: 32rpx;
			}
		}
		.bottom {
			width: 88%;
			margin: auto;
			//background-color: pink;
			display: flex;
			flex-wrap: wrap;
			.inside {
				background-color: #e6e6e6;
				border-radius: 100rpx;
				font-size: 28rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				display: flex;
				justify-content: center;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
